S   <template>
    <div class="footer-nav">
        <!-- <ul>
            <li @click="$router.push('/home')" :class="{ active: $route.path === 'home' }">首页</li>
            <li @click="$router.push('/kind')" :class="{ active: $route.path === 'kind' }">分类</li>
            <li @click="$router.push('/cart')" :class="{ active: $route.path === 'cart' }">购物车</li>
            <li @click="$router.push('/my')" :class="{ active: $route.path === 'my' }">我的</li>
        </ul> -->
        <ul>
            <li v-for="item in navItems"
            :key="item.path"
            @click="$router.push(item.path)"
            :class="{active:$route.path===item.path}">
            <span><van-icon :name="item.icon" /></span>
            <span>{{ item.label }}</span>
            
        </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            navItems: [
                { label: '首页', path: '/home',icon:'wap-home-o'},
                { label: '分类', path: '/kind',icon:'apps-o' },
                { label: '购物车', path: '/cart',icon:'shopping-cart-o' },
                { label: '我的', path: '/my' ,icon:'manager-o'},
            ]
        }
    }

}
</script>

<style lang="less" scoped>
.footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    background-color: #ffffff;
    z-index: 999;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.footer-nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}

.footer-nav ul li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

}
.active {
    background-color: orange;
    color: red;
}



</style>